<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>分类汇总</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
    <link rel="stylesheet" href="../../../style/wangeditor.css">
    <link rel="stylesheet" href="../../../style/index.css">
    <style>
        .custom-tree-node {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            padding-right: 8px;
        }

        .custom-tree-node .config {
            padding: 10px 0 10px 8px;
            border-left: 1px solid #EBEEF5;
        }

        .el-tree {
            border-top: 1px solid #EBEEF5;
            border-left: 1px solid #EBEEF5;
            border-right: 1px solid #EBEEF5;
        }

        .el-tree-node__content {
            padding: 10px 0 10px;
            border-bottom: 1px solid #EBEEF5;
            height: 100%;
        }

        .el-dialog__header {
            padding: 15px 15px 10px;
        }

        .el-dialog__body {
            padding: 15px;
        }

        .el-dialog__footer {
            padding: 5px 15px 10px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <el-form :inline="true" :form="form">
            <el-form-item>
                <el-button type="primary" @click="Add">添加分类</el-button>
            </el-form-item>
            <el-form-item>
                <el-input placeholder="请输入分类名称" clearable @change="onSerach" v-model.trim="form.Components_Name"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSerach">查询</el-button>
            </el-form-item>
        </el-form>
        <el-tree :data="tableData" node-key="Classify_SerialNumber" default-expand-all :expand-on-click-node="false" :props="defaultProps">
            <span class="custom-tree-node" slot-scope="{ node, data }">
                <span style="display:  flex; align-items: center;">
                    <span style="margin-right: 10px;">{{ node.label }}</span>
                    <el-image v-if="data.Picture_URL" :src="BASE_IMG + data.Picture_URL" style="width: 50px; height: 50px; border-radius: 5px;"></el-image>
                </span>
                <span class="config">
                    <el-button :disabled="data.Level=='3'" :type="data.Level=='3'?'info':'success'" size="small"
                        @click="Add(node,data)">添加子分类</el-button>
                    <el-button type="primary" size="small" @click="Edit(data.Classify_SerialNumber)">编辑</el-button>
                    <el-button type="danger" size="small" @click="Remove(data)">删除</el-button>
                </span>
            </span>
        </el-tree>
        <!-- 添加菜单 -->
        <add-node :data="nodeData" :visible.sync="dialogVisible" @success="getList"></add-node>
        <edit-node :id="Classify_SerialNumber" :visible.sync="dialogEditVisible" @success="getList"></edit-node>
    </div>
    <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../component/component.js"></script>
    <script type="text/javascript" src="../../../config/config.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/ID_Validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</body>

</html>